Revision:
Et hinc magna voluptatum usu, cum veniam graece et. Ius ea scripserit temporibus, pri cu harum tacimates neglegentur. At adipisci incorrupte nam. Cu qui sumo appareat constituto, possit phaedrum inciderint ex usu, quis ignota cotidieque nam ea. Cum deserunt periculis ocurreret.
Habemus principes eos id, eu sonet patrioque nam. Eu his mazim insolens, et vim saperet laboramus. Enim gubergren temporibus vix ei. Dicunt iuvaret sadipscing te nam, legere assueverit sed in, at everti labores.
Dico facilis dissentias mea cu. Nam assum eripuit an.
Scaevola definitiones eum et. Assum postulant periculis per ei. Doming scribentur sea an. Eum verear docendi tincidunt in.
Ne duo posse deserunt, at eam euismod torquatos, est velit essent in. Et diam meliore cotidieque vim. Dicit ignota repudiandae ei pri.
<div class="container">
<div class="post-wrap">
<div class="post">
<div class="post-front">
<div class="post-img" style="background-image: url('../images/1.jpg');"></div>
<div class="post-info">
<span>May 22, 2021</span>
<h3>Holidays and Covid-19: expectations vs reality</h3>
</div>
</div>
<div class="post-back">
<div class="post-except">
<h3>Holidays and Covid-19: expectations vs reality</h3>
<p>Et hinc magna voluptatum usu, cum veniam graece et. Ius ea scripserit temporibus,
pri cu harum tacimates neglegentur. At adipisci incorrupte nam. Cu qui sumo appareat
constituto, possit phaedrum inciderint ex usu, quis ignota cotidieque nam ea. Cum deserunt
periculis ocurreret.</p>
</div>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="post-wrap">
<div class="post">
<div class="post-front">
<div class="post-img" style="background-image: url('../images/2.jpg');"></div>
<div class="post-info">
<span>May 22, 2021</span>
<h3>Asian perspectives on holidays and leisure during the epidemic.</h3>
</div>
</div>
<div class="post-back">
<div class="post-excerpt">
<h3>Asian perspectives on holidays and leisure during the epidemic.</h3>
<p>Habemus principes eos id, eu sonet patrioque nam. Eu his mazim insolens, et vim
saperet laboramus. Enim gubergren temporibus vix ei. Dicunt iuvaret sadipscing te nam,
legere assueverit sed in, at everti labores.
</p>
<p>Dico facilis dissentias mea cu. Nam assum eripuit an.</p>
</div>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="post-wrap">
<div class="post">
<div class="post-front">
<div class="post-img" style="background-image: url('../images/3.jpg');"></div>
<div class="post-info">
<span>May 24, 2021</span>
<h3>This week's top stories in fighting the virus.</h3>
</div>
</div>
<div class="post-back">
<div class="post-except">
<h3>This week's top stories in fighting the virus.</h3>
<p>
Scaevola definitiones eum et. Assum postulant periculis per ei. Doming scribentur
sea an. Eum verear docendi tincidunt in.
</p>
<p>
Ne duo posse deserunt, at eam euismod torquatos, est velit essent in. Et diam meliore
cotidieque vim. Dicit ignota repudiandae ei pri.
</p>
</div>
<a href="#">Read More</a>
</div>
</div>
</div>
</div>
<style>
.container1 {max-width: 160vw; margin: auto; padding: 2vw; display: flex;justify-content: center; flex-wrap: wrap;}
.post-wrap {min-width: 25vw; max-width: 30vw; height: 40vw; perspective: 50vw; flex: 1; margin: 0 1.5vw 2vw;}
.post {position: relative; width: 100%; height: 100%; transition: transform 1s; transform-style: preserve-3d; }
.post-front, .post-back { position: absolute; width: 100%; height: 100%; background-color: rgb(184, 230, 172);
-webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 1vw; box-shadow: 0 4px 6px
-1px rgba(0, 0, 0, 0.1);}
.post-back {transform: rotateY(180deg);}
.post-wrap:hover .post { transform: rotateY(180deg);}
.post-img {background-size: cover; background-position: center;height: 28vw; border-top-left-radius: 1vw;
border-top-right-radius: 1vw;}
.post-info {padding: 2vw 3vw 3vw;}
.post-info span {font-size: 0.8vw; color: #808080;}
.post-info h2{font-weight: bold;font-size: 1.2vw; padding-top: 0.5vw;}
.post-back {background-color: #e4b5b5; padding: 3vw;display: flex; flex-direction: column;justify-content:
space-between; align-items: flex-start;}
.post-back h2{font-weight: bold; font-size: 1.2vw; padding-top: 0.5vw;}
.post-back p {margin-top: 1vw; line-height: 1.6;}
.post-back a{text-decoration: none; color: #ffffff; background-color: #5678ba; padding: 1vw 1.4vw; text-transform:
uppercase; letter-spacing: 0.05vw; font-size: 0.8vw; font-weight: bold; border-radius: 0.5vw;}
</style>
<div id="wrapper">
<div class="cube_a">
<!--Front-->
<div>front</div>
<!--Back-->
<div>back</div>
<!--Left-->
<div>left</div>
<!--Right-->
<div>right</div>
<!--Top-->
<div>top</div>
<!--Bottom-->
<div>bottom</div>
</div>
</div>
<style>
#wrapper{width:20vw; height:20vw; perspective:70vw; -webkit-perspective:70vw; margin:12vw auto;}
.cube_a{position:relative; width:26vw; height:26vw; transform-style:preserve-3d; transform:rotateX(25deg)
rotateY(-55deg); transition:300ms ease-in; animation: turn 15s 1s linear infinite;}
.cube_a div{position:absolute; width:28vw; height:28vw; background:rgba(0,0,0,0.1);color: white; text-align: center;}
.cube_a div:nth-child(1){transform:rotateX(0deg) translateZ(14vw); background-image:url("../images/1.jpg"); background-size: cover;}
.cube_a div:nth-child(2){transform: rotateX(180deg) translateZ(14vw); background-image:url("../images/2.jpg"); background-size: cover;}
.cube_a div:nth-child(3){transform: rotateY(-90deg) translateZ(14vw); background-image:url("../images/3.jpg"); background-size: cover;}
.cube_a div:nth-child(4){transform:rotateY(90deg) translateZ(14vw); background-image:url("../images/8.jpg"); background-size: cover;}
.cube_a div:nth-child(5){transform: rotateX(90deg) translateZ(14vw); background-image:url("../images/5.jpg"); background-size: cover; }
.cube_a div:nth-child(6){transform:rotateX(-90deg) translateZ(14vw); background-image:url("../images/6.jpg"); background-size: cover; }
@keyframes turn{
0%{transform:rotateX(25deg) rotateY(-55deg);}
10%{transform:rotateX(35deg) rotateY(65deg);}
20%{transform:rotateX(45deg) rotateY(-75deg);}
30%{transform:rotateX(-55deg) rotateY(85deg);transform: translate(20vw);}
40%{transform:rotateX(65deg) rotateY(95deg);}
50%{transform:rotateX(70deg) rotateY(120deg);}
60%{transform:rotateX(60deg) rotateY(-90deg);}
70%{transform:rotateX(-50deg) rotateY(80deg);transform: translate(-20vw);}
80%{transform:rotateX(40deg) rotateY(70deg);}
90%{transform:rotateX(30deg) rotateY(60deg);}
100%{transform:rotateX(25deg) rotateY(-55deg);}
}
</style>